<template>
  <el-card class="heating-analysis-wrapper card-header">
    <header>
      <div class="head">
        <div class="head-icon">
          <svg-icon icon-class="dashboard-2"></svg-icon>
        </div>
        <div>加热时长分析</div>
      </div>
      <div><XyTimePicker></XyTimePicker></div>
    </header>
    <div class="data-energy-container" ref="chartContainer"></div>
    <div class="analysis-wrapper electricity-consumption">
      <header>加热时长分析</header>
      <main>
        <div class="main-left">
          <div>今日数据:</div>
          <div><svg-icon icon-class="dot"></svg-icon>最高加热时长:1.0小时(14:00-15:00)</div>
          <div><svg-icon icon-class="dot"></svg-icon>最低加热时长:0.0小时(00:00-06:00)</div>
          <div><svg-icon icon-class="dot"></svg-icon>平均加热时长:0.27小时/小时</div>
        </div>
        <div class="main-right">
          <div>昨日数据:</div>
          <div><svg-icon icon-class="dot"></svg-icon>最高加热时长:0.9小时(15:00-16:00)</div>
          <div><svg-icon icon-class="dot"></svg-icon>最低加热时长:0.0小时(00:00-06:00)</div>
          <div><svg-icon icon-class="dot"></svg-icon>平均加热时长:0.29小时/小时</div>
        </div>
      </main>
    </div>
  </el-card>
</template>

<script>
import XyTimePicker from "@/components/XyTimePicker.vue";
import * as echarts from "echarts";

export default {
  components: {
    XyTimePicker,
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.initChart();
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
      window.removeEventListener("resize", this.resizeChart);
    }
  },
  methods: {
    initChart() {
      this.$nextTick(() => {
        const chartDom = this.$refs.chartContainer;
        if (chartDom) {
          this.chart = echarts.init(chartDom);
          this.setChartOption();
          window.addEventListener("resize", this.resizeChart);
        }
      });
    },

    setChartOption() {
      // 生成时间标签（24小时）
      const labels = [];
      for (let i = 0; i < 24; i++) {
        labels.push(`${i}:00`);
      }

      // 生成今日和昨日加热时长数据
      const todayData = this.getRandomData(24, 0, 1);
      const yesterdayData = todayData.map(val => val * (0.85 + Math.random() * 0.15));

      const option = {
        color: ['#6B21A8', '#9CA3AF'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          formatter: (params) => {
            let tooltipText = `${params[0].axisValueLabel}<br/>`;
            params.forEach(param => {
              tooltipText += `${param.marker} ${param.seriesName}: ${param.value} 小时<br/>`;
            });
            return tooltipText;
          }
        },
        legend: {
          data: ['今日加热时长', '昨日加热时长'],
          top: 'top'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '20%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: labels,
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              color: '#9498a1',
              margin: 10,
              fontSize: 11
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(148, 163, 184, 0.2)'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '加热时长 (小时)',
            nameTextStyle: {
              color: '#9498a1',
              padding: [0, 0, 0, 40],
              fontSize: 11
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(148, 163, 184, 0.1)'
              }
            },
            axisLabel: {
              color: '#9498a1',
              fontSize: 11
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(148, 163, 184, 0.2)'
              }
            }
          }
        ],
        series: [
          {
            name: '今日加热时长',
            type: 'bar',
            data: todayData,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(107, 33, 168, 0.8)' },
                { offset: 1, color: 'rgba(107, 33, 168, 0.4)' }
              ]),
              borderColor: 'rgba(107, 33, 168, 1)',
              borderWidth: 1,
               borderRadius: 4// 添加四周圆角，顺序为：[上左, 上右, 下右, 下左]
            },
            barWidth: 12,
            barGap: '30%'
          },
          {
            name: '昨日加热时长',
            type: 'bar',
            data: yesterdayData,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(156, 163, 175, 0.6)' },
                { offset: 1, color: 'rgba(156, 163, 175, 0.3)' }
              ]),
              borderColor: 'rgba(156, 163, 175, 1)',
              borderWidth: 1,
               borderRadius: 4 // 添加四周圆角，顺序为：[上左, 上右, 下右, 下左]
            },
            barWidth: 12,
            barGap: '30%'
          }
        ]
      };

      this.chart.setOption(option);
    },

    // 生成随机数据的工具函数
    getRandomData(count, min, max) {
      return Array.from({ length: count }, () => 
        parseFloat((Math.random() * (max - min) + min).toFixed(2))
      );
    },

    resizeChart() {
      if (this.chart) {
        setTimeout(() => {
          this.chart.resize();
        }, 100);
      }
    },
  }
};
</script>

<style scoped lang="scss">
@import "./styles/common.scss";
.heating-analysis-wrapper.card-header {
  .head {
    .head-icon {
      background-color: #ede9fe;
      color: #7c3aed;
    }
  }
  .data-energy-container {
    width: 100%;
    height: 400px;
    margin: 15px 0;
  }
  .electricity-consumption {
    width: 100%;
    color: #5b21b6;
    background-color: rgba(245, 243, 255, 0.8);
    main {
      margin-top: 10px;
      display: flex;
      .main-left,
      .main-right {
        width: 50%;
        padding: 10px;
      }
    }
  }
}
</style>